<template>
  <div class="searchDetail">
    <div class="topNavbar">
    <div class="logo" @click="backToHome">
      <img src="@/assets/images/logo2.png">
    </div>
    <div class="searchBox">
      <div class="searchBar">
        <van-search @click-input="clickHandler" v-model="keyValue" shape="round" clear-trigger="always" @clear="toSoSearch"/>
        
      </div>
    </div>
    <div class="btn_box" @click="goLogin">
      登录
    </div>
  </div>
  <van-tabs v-model:active="active" class="tabs" line-width="18px"  title-inactive-color="#a3a3ac" color="#f06742">
  <van-tab title="全部">
  <!-- whole -->
   <div> 
     <Whole v-model="active" :userViewList="userViewList" :albumList="albumList" :trackList="trackList"></Whole></div> 


  </van-tab>
  
 
  <van-tab title="专辑">
    <searchCollection :kw="keyValue"></searchCollection>
  </van-tab>
  <van-tab title="声音">
    <Sound :kw="keyValue"></Sound>

  </van-tab>
  <van-tab title="主播">
  <Anchor></Anchor>
  <bottom></bottom>
  </van-tab>
</van-tabs>

<van-back-top />
  </div>

</template>

<script setup lang="ts">
import searchCollection from './components/searchCollection/index.vue'
import searchApi from '@/apis/search';
import type { AnyObject, DetailModel } from '@/apis/search';
import {ref,onMounted} from 'vue'
import { useRouter,useRoute } from "vue-router"
import Anchor from './components/Anchor/index.vue'
import bottom from './components/Anchor/bottom.vue'
import Sound from './components/Sound/index.vue'
import Whole from './components/Whole/index.vue'
const router = useRouter()
const route=useRoute()
const keyValue=ref()
const active=ref(0)
const albumList=ref<AnyObject[]>([])
const trackList=ref<AnyObject[]>([])
const userViewList=ref<AnyObject[]>([])
const page=1
const rows=5
const core='all'
onMounted(()=>{
  keyValue.value=route.params.keyWord
  // console.log(route.params.keyWord);
  getData()
})



const clickHandler=()=>{
  router.push({
    path:'/search'
  })
}
/* 点击logo图片的回调 */
const backToHome = () => {
  router.push({
    path:"/home"
  })
}

const goLogin=()=>{
 router.push({
  path:'/login'
 })
}

const toSoSearch=()=>{
  router.push({
    path:'/so'
  })
}

const getData=()=>{
  keyValue.value=route.params.keyWord
  
   const data={
    kw:keyValue.value,
    page,
    core,
    rows

   }
   getSearchDetailList(data)
  
}
// 获取详情结果
const getSearchDetailList=async (data:DetailModel)=>{
  try {
    let res=await searchApi.reqSearchDetail(data)
    albumList.value=res.data.albumViews.albums
  trackList.value=res.data.trackViews.tracks
  userViewList.value=res.data.userViews.users
  } catch (error) {
    console.log(error);
    
  }
}
</script>

<style lang="less" scoped>
.searchDetail{
  .topNavbar {
  width: 375px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px 5px;
  box-sizing: border-box;
}

.logo {
  width: 70px;
  height: 15px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    position: absolute;
  }
}

.btn_box {
  width: 68px;
  height: 30px;
  border:1px solid #FA2800;
  border-radius: 15px;
  color: #FA2800;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}

.searchBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 182px;
  height: 30px;
}

.searchBar {
  display: flex;

  align-items: center;
  width: 345.2px;
  height: 30px;
  background-color: rgb(239, 241, 244);
  border-radius: 20px;
}

.search_icon {
  width: 14px;
  height: 14px;
  margin-left: 10px;
}

.search_text {
  font-size: 12px;
  color: #ABABAB;
  margin-left: 10px;
}

/deep/.van-tab--active{
    font-size: 16px;
    font-weight: 400;
  }

}

</style>